import React, { Component } from 'react'
import { Select } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import { Table } from 'antd';
import './Leave.css'
import service from '../../../utils/service';
// 时间组件导入
import { DatePicker, Space } from 'antd';
// 时间定义
const { Option } = Select;

interface DataType {
    division: any;
    xm: any;
    start: any;
    end: any;
    caus: any;
    types: any;
    time: any;
    sta: any;
    rove: any,
    operation: any
}

export default class Mytime extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            arr: [],
            starts: '',
            ends: '',
            causs: '',
            roves: ''

        }
    }
    // tab表格里的数据
    columns: ColumnsType<DataType> = [
        {
            title: '部门',
            dataIndex: 'division',
            width: 120,
            align: 'center',

        },
        {
            title: '姓名',
            dataIndex: 'xm',
            width: 120,
            align: 'center',
        },
        {
            title: '开始时间',
            dataIndex: 'start',
            width: 180,
            align: 'center',
        },
        {
            title: '结束时间',
            dataIndex: 'end',
            width: 180,
            align: 'center',
        },
        {
            title: '请假原因',
            dataIndex: 'caus',
            width: 120,
            align: 'center',
            render: (text, record, index) => (
                <div>
                    <button className='qjyy' onClick={() => this.watc(text, record, index)}>查看</button>
                </div>
            )
        },
        {
            title: '请假类型',
            dataIndex: 'caus',
            width: 120,
            align: 'center',
        },
        {
            title: '申请时间',
            dataIndex: 'start',
            width: 180,
            align: 'center',
        },
        {
            title: '审批状态',
            dataIndex: 'rove',
            width: 150,
            align: 'center',
            render: (text, record, index) => (
                <div>
                    {/* <p className={}>{record.rove}</p> */}
                    {/* 用与根据不同数据渲染不同样式 */}
                    {
                        <div>
                            {
                                record.rove === '待审批' && (<p style={{ color: '#FF6600' }}>{record.rove}</p>)
                            }
                            {
                                record.rove === '审批通过' && (<p style={{ color: '#00CC33' }}>{record.rove}</p>)
                            }
                            {
                                record.rove === '审批驳回' && (<p style={{ color: '#FF0000' }}>{record.rove}</p>)
                            }
                        </div>
                    }
                </div>
            )
        },
        {
            title: '操作',
            dataIndex: 'operation',
            width: 180,
            align: 'center',
            render: (text, record, index) => (
                <div>
                    {record.rove === '待审批' ? <div><button className='bj' onClick={()=>this.redact(text, record, index)}>编辑</button>
                        <button className='cxsq' onClick={() => this.rev(text, record, index)}>撤销</button></div> : <button className='ckxq' onClick={() => this.deta(text, record, index)}>查看详情</button>}
                </div>
            )
        },
    ];
    // 跳转到请假编辑详情
    redact = (text:any, record:any, index:any) => {
        this.props.history.push({pathname:'/Main/Redact',query:{record}})
    }

    
    // 查看请假详情
    watc = (text: any, record: any, index: any) => {
        alert(record.yy)
    }
    // 撤销请假申请
    rev = (text: any, record: any, index: any) => {
        alert('你确定要撤销吗')
        service({
            url: `/teacher/${record.id}`,
            method: 'delete'
        }).then(res => {
            // 需要刷新才能获取到数据，所以重新发一下请求
            service({
                url: '/teacher'
            }).then(res => {
                this.setState({
                    arr: res.data,
                })

            })
        })
    }
    // 查看请假详情
    deta = (text: any, record: any, index: any) => {
        this.props.history.push({ pathname: '/Main/Details', query: { record } })
    }
    // 跳到申请请假
    apply = () => {
        this.props.history.push('/Main/Apply')
    }
    // 发请求获取表格数据
    componentDidMount(): void {
        service({
            url: '/teacher'
        }).then(res => {
            this.setState({
                arr: res.data
            })
        })

    }
    // 绑定事件进行查询,
    search = () => {
        if (this.state.starts) {
            service({
                url: '/teacher',
                params: {
                    start: this.state.starts,
                }
            }).then(res => {
                this.setState({
                    arr: res.data
                })
            })
        } else if (this.state.ends) {
            service({
                url: '/teacher',
                params: {
                    end: this.state.ends,
                }
            }).then(res => {
                this.setState({
                    arr: res.data
                })
            })
        } else if (this.state.causs) {
            service({
                url: '/teacher',
                params: {
                    caus: this.state.causs,
                }
            }).then(res => {
                this.setState({
                    arr: res.data
                })
            })
        } else if (this.state.roves) {
            service({
                url: '/teacher',
                params: {
                    rove: this.state.roves,
                }
            }).then(res => {
                this.setState({
                    arr: res.data
                })
            })
        }

    }
    // 绑定事件进行查询重置
    reset = () => {
        service({
            url: '/teacher'
        }).then(res => {
            this.setState({
                arr: res.data
            })
        })
    }

    render() {
        return (
            <div>
                <div className='box1'>
                    <Space direction="vertical" style={{ marginTop: '30px', marginLeft: '30px' }}>
                        <DatePicker onChange={(date, dateString) => { this.setState({ starts: dateString }) }} placeholder='申请时间' />
                    </Space>
                    <Space direction="vertical" style={{ marginTop: '30px', marginLeft: '30px' }}>
                        <DatePicker onChange={(date, dateString) => { this.setState({ ends: dateString }) }} placeholder='结束时间' />
                    </Space>
                    <Select style={{ width: '142px', marginLeft: '20px' }} placeholder="请假类型" allowClear onSelect={(value) => { this.setState({ causs: value }) }}>
                        <Option value="事假">事假</Option>
                        <Option value="病假">病假</Option>
                        <Option value="调休">调休</Option>
                        <Option value="产假">产假</Option>
                        <Option value="陪产假">陪产假</Option>
                        <Option value="婚假">婚假</Option>
                        <Option value="丧假">丧假</Option>
                    </Select>
                    <Select style={{ width: '142px', marginLeft: '20px' }} placeholder="审批状态" allowClear onSelect={(value) => { this.setState({ roves: value }) }}>
                        <Option value="审批通过">审批通过</Option>
                        <Option value="审批驳回">审批驳回</Option>
                        <Option value="待审批">待审批</Option>
                    </Select>
                    <button className='cx' onClick={this.search}>查 询</button>
                    <button className='cz' onClick={this.reset}>重 置</button>
                    {/* 增加数据 post 携带data:{}*/}
                    <button className='qj' onClick={this.apply}> + 申请请假</button>
                    {/* 测试 */}

                    <div className='sj' >
                        <p className='sjwz'>查询结果：共计<span style={{ color: '#1890FF' }}> {this.state.arr.length} </span>条数据</p>
                    </div>
                    <div style={{ marginTop: '20px' }}>
                        <Table columns={this.columns} dataSource={this.state.arr} pagination={{ pageSize: 10 }} scroll={{ y: 460 }} bordered={true} />
                    </div>
                </div>
            </div>
        )
    }
}
